import React from 'react'

import { Table, Modal, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import axios from '../../utils/http'
import { QUERYFATIVE, DELFACTIVEBYID } from '../../utils/api'


class PowerActivitiesTable extends React.Component {
  constructor() {
    super()
    this.state = {
      //   表格的头部
      columns: [
        {
          title: 'ID',
          dataIndex: 'objs',
        },
        {
          title: '商品名称',
          dataIndex: 'obj',
        },
        {
          title: '活动时间',
          render: (x, y, z) => <div><p>{y.fativeStart}</p><p>{y.fativeLast}</p></div>,
        },
        {
          title: '已秒',
          dataIndex: 'snapNum',
        },
        {
          title: '状态',
          dataIndex: 'factiveStatu',
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 100,
          render: (x, y, z) => <div style={{ color: '#4E6EF2' }}><span onClick={this.modification.bind(this,y)}>修改</span> <span onClick={this.confirm.bind(this, y)}>删除</span></div>,
        },
      ],

      // 分页条数
      pagination: {
        pageSize: 4
      },
      //  表格数据
      data: [
      ],

    }
  }
  //  生命周期
  componentWillMount() {

    // 查询助力活动信息
    axios({
      method: 'get',
      url: QUERYFATIVE
    }).then((data) => {
      console.log(data);
      for (let i = 0; i < data.data.data.length; i++) {
        // const element = array[i];
        data.data.data[i].key = data.data.data[i].factiveId
        if (data.data.data[i].factiveStatu === 1) {
          data.data.data[i].factiveStatu = '进行中'
        } else if (data.data.data[i].factiveStatu === 2) {
          data.data.data[i].factiveStatu = '未开始'
        } else if (data.data.data[i].factiveStatu === 3) {
          data.data.data[i].factiveStatu = '进行中已售空'
        } else {
          data.data.data[i].factiveStatu = '结束'
        }
        data.data.data[i].objs = data.data.data[i].goods.goodsId
        data.data.data[i].obj = data.data.data[i].goods.goodsName

      }
      this.setState({
        data: [...data.data.data]
      })
    })

  }

  // 删除弹框
  confirm = (y) => {
    Modal.confirm({
      title: '是否删除',
      icon: <ExclamationCircleOutlined />,
      content: y.obj,
      okText: '确认',
      cancelText: '取消',
      onOk: this.delSure.bind(this, y)
    });
  }
  // 确定按钮
  delSure(y) {
    console.log(y.factiveId);
    axios({
      method: 'get',
      url: DELFACTIVEBYID,
      params: { factiveId: y.factiveId }
    }).then(data => {
      console.log(data);
      if (data.data.code === 200) {
        message.success('删除成功', 3);
        axios({
          url: QUERYFATIVE,
          method: 'get'
        }).then(data => {
          for (let i = 0; i < data.data.data.length; i++) {
            data.data.data[i].key = data.data.data[i].factiveId
            data.data.data[i].objs = data.data.data[i].goods.goodsId
              data.data.data[i].obj = data.data.data[i].goods.goodsName
          }
          // console.log(data);
          this.setState({
            data: [...data.data.data]
          })
        })
      } else {
        message.error('删除失败', 3);
      }
    })
  }
  // 修改
  modification = (y) => {
    // this.props.history.push('/Home/cuXiao/PowerActivities/ModifyPower')
    this.props.history.push({pathname:"/Home/cuXiao/PowerActivities/ModifyPower",query: { name : y }});
  }

  render() {
    return (
      <Table pagination={this.state.pagination} columns={this.state.columns} dataSource={this.state.data} />
    )
  }

}

export default PowerActivitiesTable